<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title>添加老师</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/addTeacher.css">
</head>

<body>
    <div id="teacherInfo">
        <input type="text" id="copyText" value="kexuemihe1">
        <div class="centerBox">
            <div id="infoBox">
                <img src="./images/weixin.png" id="headPic">
                <h5>姗姗老师</h5>
                <p>家长添加专属老师微信，老师将全程提供一对一课程辅导，解答学习疑惑</p>
                <img src="./images/weixin.png" alt="">
                <span>kexuemihe1</span>
                <button id="copyWX" onclick="copy('copyText')">复制老师微信号</button>
            </div>
        </div>
    </div>
    <div id="dislog">
        <div class="centerBox">
            <p>复制成功</p>
        </div>
    </div>
    <script src="./js/jq.min.js"></script>
    <script>
        function copy(id) {
            var copycode = document.getElementById(id)
            // console.log(copycode)
            /** 通过 select() 方法，选中输入框的文本   将输入框opacity设置为了0  display:none  不生效
             */
            copycode.select(); // 选择对象
            /** 浏览器提供了 copy 命令 ，可以复制选中的内容
             * 执行浏览器复制命令
             */
            document.execCommand('Copy');
            $("#dislog").show();
            setTimeout(function () {
                $("#dislog").hide();
            }, 1000)
        }
    </script>
</body>

</html>